<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-for</title>
	<script src="js/vue.js"></script>
</head>
<body>
		
<div id="app">
	<h3>绑定key能提高效率(也可以用 of 替代 in 作为分隔符)：</h3>
	<p style="color: red;">
		Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：<br>
		push();<br>
		pop();<br>
		shift();<br>
		unshift();<br>
		splice();<br>
		sort();<br>
		reverse();<br>
		试试：vm.arr.push({id:6004, name:'麻六', age: 29})
	</p>
	<ul>
		<li v-for="(item, index) in arr" :key="index">{{index}} ： {{item.id}} 、{{item.name}}、{{item.age}}</li>
	</ul>
	<h3>遍历对象：</h3>
	<p v-for="(v, k, i) in obj" :key="k">{{i}}、{{k}}：{{v}}</p>
	
	<h3>v-for 也可以接受整数：</h3>
	<p v-for="(k, i) in 10">{{i}}、{{k}}</p>
</div>

</body>
<script>
let vm = new Vue({
	el:'#app',
	data: {
		arr: [
			{id:6001, name:'张三', age: 25},
			{id:6002, name:'李四', age: 26},
			{id:6003, name:'王五', age: 21}
		],
		obj: {
			title: '这是一个测试标题。。。',
			content: '这是主体内容。。。',
			date: '2021-08-09',
			name: 'Tom',
		}
	}
})
</script>
</html>
